<template>
  <div class="sdy-home-nav-list">
    <van-swipe
      class="swiper-container"
      :duration="300"
      :loop="false"
      indicator-color="red">
      <van-swipe-item>
        <!-- 宫格展示 -->
        <van-grid :border="false" :column-num="5">
          <van-grid-item
            v-for="item in navs"
            :key="item.id"
            :icon="item.img"
            :text="item.title"/>
        </van-grid>
      </van-swipe-item>
      <van-swipe-item>
        <!-- 宫格展示 -->
        <van-grid :column-num="5">
          <van-grid-item v-for="value in 10" :key="value" icon="photo-o" text="文字" />
        </van-grid>
      </van-swipe-item>
    </van-swipe>
  </div>
</template>

<script setup lang="ts">
const navs = [
  { id: 1, title: '啥都有超', img: 'https://m15.360buyimg.com/mobilecms/jfs/t1/175540/24/19329/6842/60ec0b0aEf35f7384/ec560dbf9b82b90b.png' },
  { id: 2, title: '啥都有超', img: 'https://m15.360buyimg.com/mobilecms/jfs/t1/175540/24/19329/6842/60ec0b0aEf35f7384/ec560dbf9b82b90b.png' },
  { id: 3, title: '啥都有超', img: 'https://m15.360buyimg.com/mobilecms/jfs/t1/175540/24/19329/6842/60ec0b0aEf35f7384/ec560dbf9b82b90b.png' },
  { id: 4, title: '啥都有超', img: 'https://m15.360buyimg.com/mobilecms/jfs/t1/175540/24/19329/6842/60ec0b0aEf35f7384/ec560dbf9b82b90b.png' },
  { id: 5, title: '啥都有超', img: 'https://m15.360buyimg.com/mobilecms/jfs/t1/175540/24/19329/6842/60ec0b0aEf35f7384/ec560dbf9b82b90b.png' },
  { id: 6, title: '啥都有超', img: 'https://m15.360buyimg.com/mobilecms/jfs/t1/175540/24/19329/6842/60ec0b0aEf35f7384/ec560dbf9b82b90b.png' },
  { id: 7, title: '啥都有超', img: 'https://m15.360buyimg.com/mobilecms/jfs/t1/175540/24/19329/6842/60ec0b0aEf35f7384/ec560dbf9b82b90b.png' },
  { id: 8, title: '啥都有超', img: 'https://m15.360buyimg.com/mobilecms/jfs/t1/175540/24/19329/6842/60ec0b0aEf35f7384/ec560dbf9b82b90b.png' },
  { id: 9, title: '啥都有超', img: 'https://m15.360buyimg.com/mobilecms/jfs/t1/175540/24/19329/6842/60ec0b0aEf35f7384/ec560dbf9b82b90b.png' },
  { id: 10, title: '啥都有超', img: 'https://m15.360buyimg.com/mobilecms/jfs/t1/175540/24/19329/6842/60ec0b0aEf35f7384/ec560dbf9b82b90b.png' },
]
</script>

<style scoped lang="scss">
.sdy-home-nav-list {
  height: 210px;
  box-sizing: border-box;
  padding: 15px;

  > .swiper-container {
    height: 100%;
  }
}
</style>
